<template>
  <div class="register-container" style="border-radius: 30px"  >
    <div style="border-radius: 150px;border: 5px solid  coral;margin-top: 50px;width: 600px;height: 500px">
    <el-form
        ref="registerForm"
        :model="registerData"
        :rules="rules"
        label-width="100px"
        @submit.native.prevent="submitForm"
        style="margin-top: 100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="registerData.username" style="width: 420px;opacity:0.5"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="registerData.password" style="width: 420px;opacity:0.5"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="registerData.confirmPassword" style="width: 420px;opacity:0.5"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="registerData.email" style="width: 420px;opacity:0.5"></el-input>
      </el-form-item>
      <div style="display: flex;">
      <el-form-item label="验证码" prop="verificationCode">
        <el-input v-model="registerData.code" style="width: 210px;opacity:0.5"></el-input>
        <el-button style="width: 140px;border-radius: 30px" type="success"  @click="sendEmail">发送验证码</el-button>
      </el-form-item>

      </div>
      <div style="display: flex;">
        <el-form-item>
          <el-button style="width: 150px;border-radius: 30px" type="primary" native-type="submit">注册</el-button>

        </el-form-item>
        <el-form-item>
          <router-link to="/Login"  style="color: coral">去登录</router-link>
        </el-form-item>
      </div>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      registerData: {
        username: "",
        password: "",
        confirmPassword: "",
        email: "",
        code: "",
      },
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
        ],
        confirmPassword: [
          {required: true, message: "请再次输入密码", trigger: "blur"},
          {
            validator: this.validateConfirmPassword,
            trigger: "blur",
          },
        ],
        email: [
          {required: true, message: "请输入邮箱", trigger: "blur"},
          {type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]},
        ],
        code: [
          {required: true, message: "请输入验证码", trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    sendEmail() {
      // 获取要发送的邮箱地址
      const email = this.registerData.email;

      if(!email){

        this.$notify.error({
          title: '错误',
          message: '邮箱地址不能为空'
        });
        return
      }


      // 使用Axios发送请求到后台
      axios.post('http://localhost:8082/user/sendMail', { email})
          .then(response => {
            console.log("=========================",JSON.stringify(response.data))
            if(response.data.code===200) {
              this.$notify({
                title: '成功',
                message: '邮箱发送成功',
                type: 'success'
              });
            }
            else if(response.data.code===500){
              this.$notify({
                title: '警告',
                message: response.data.msg,
                type: 'warning'
              });
            }

            // 处理响应，例如显示成功消息
            console.log('Email sent successfully');
          })
          .catch(error => {
            // 处理错误，例如显示错误消息
            console.error('Failed to send email:', error);
          });
    },
    submitForm() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          axios.post("http://localhost:8082/user/register",this.registerData).then(response=>{
            if(response.data.code===200) {
              this.$notify({
                title: '成功',
                message: '注册成功',
                type: 'success'
              });
            }if (response.data.code===500) {
              this.$notify.error({
                title: '错误',
                message: response.data.msg,
              });
            }
          })
        } else {
          return false;
        }
      });
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.registerData.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    },
  },
};
</script>

<style>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom, #6394f8, #62d8aa);
  background-image: url('@/assets/register.jpg');
  background-size: cover;
  background-position: center;
}

.register-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(255, 255, 255, 0.8); !* 添加半透明白色遮罩，使内容更易读 *!*/
}

.register-button {
  text-align: right;
  margin-top: 20px;
  margin-right: 100px;

}
</style>